/**
* 描述：后台登录页面
*/
<style lang="scss" scoped>
  @import 'style/style';
  canvas {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
  }
</style>
<template>
  <div class="main-login">
    <canvas ref="canvas" class="canvas"></canvas>
    <transition name="bounceLeft">
      <div class='login-form' v-show="showLogin">
        <div class="flex-row">
          <input class='lf--input' v-bubble="{duration: 3000, end: 100, color: '#0c9577'}"　v-model="loginInfo.account" placeholder='Username' type='text'>
        </div>
        <div class="flex-row">
          <input class='lf--input' v-bubble="{duration: 3000, end: 100, color: '#0c9577'}"　v-model="loginInfo.password" placeholder='Password' type='password'
                 @keyup.enter="login()">
        </div>
        <el-button type="primary" class="lf--submit" @click="login()" :loading="loadingBut">登 录</el-button>
      </div>
    </transition>
  </div>
</template>
<script>
  import canvas from './canvas.js';
  import md5 from 'js-md5';
  import { managerLogin } from '@/service/mge/login/loginMService';
  export default {
    mixins: [canvas],
    data () {
      return {
        showLogin: false,
        loginInfo: {},
        loadingBut: false
      };
    },
    computed: {},
    components: {},
    mounted () {
      this.showLogin = true;
    },
    methods: {
      // 点击登录
      async login () {
        if (!this.loginInfo.account) {
          this.$message({
            message: '请输入用户名',
            type: 'warning'
          });
          return;
        }
        if (!this.loginInfo.password) {
          this.$message({
            message: '请输入密码',
            type: 'warning'
          });
          return;
        }
        try {
          this.loadingBut = true;
          let loginInfo = this._hyTool.deepCopy(this.loginInfo);
          loginInfo.password = md5(loginInfo.password);
          let result = await managerLogin(loginInfo);
          this._hyTool.removeStore('webLoginInfo', result.data);
          this._hyTool.removeStore('companyLoginInfo', result.data);
          this._hyTool.removeStore('mgeLoginInfo', result.data);
          this._hyTool.setStore('mgeLoginInfo', result.data);
          this.$Notice.success({title: '登录成功!'});
          this.$router.push({path: '/mge/main/home'});
        } catch (e) {
          console.log(e);
          this.loadingBut = false;
        }
      }
    }
  };
</script>
